<template>
  <div class="search-box">
    <div class="location bottom-gray-line">
      <div class="city" @click="cityClick">{{currentCity.cityName}}</div>
      <div class="kong"></div>
      <div class="position" @click="positionClick">
          <span class="text">我的位置</span>
          <img src="@/assets/img/home/home-location.svg" alt="">
      </div>
    </div>
    <div class="date-range bottom-gray-line" @click="calendarClick">
      <div class="start">
        <div class="text">入住</div>
        <div class="time">{{startDateStr}}</div>
      </div>
      <div class="stay">共{{stayCount}}晚</div>
      <div class="end">
        <div class="text">离店</div>
        <div class="time">{{endDateStr}}</div>
      </div>
    </div>
    <van-calendar 
      v-model:show="showCalendar" 
      type="range"
      color="#ff9854"
      :round="false" 
      @confirm="onConfirm" />
    <div class="section price-counter bottom-gray-line">
      <div class="start">价格不限</div>
      <div class="kong"></div>
      <div class="end">人数不限</div>
    </div>
    <div class="section keyword bottom-gray-line">关键字/位置/民宿名</div>
    <div class="section hot-suggest">
      <template v-for="(item) of hotSuggests">
        <div class="item"> 
          {{item.tagText.text}}
        </div>
      </template>
    </div>
    <div class="section">
      <div class="search-btn" @click="searchClick">开始搜索</div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import useCityStore from '@/store/modules/city';
import {formatMonthDay, getDiffDays} from "@/utils"
import useHomeStore from '@/store/modules/home';
import useMainStore from '@/store/modules/main';

const router = useRouter()

// const props = defineProps({
//   hotSuggests: {
//     type: Array,
//     default: () => []
//   }
// })

const cityStore = useCityStore()
const {currentCity} = storeToRefs(cityStore)
const positionClick = () => {
  navigator.geolocation.getCurrentPosition(res => {
    console.log("获取位置成功", res);
  }, err => {
    console.log("获取位置失败", err);
  }, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  })
}

const cityClick = () => {
  router.push("/city")
}

const showCalendar = ref(false)
const calendarClick = () => {
  showCalendar.value = true
}

const mainStore = useMainStore()
const {startDate, endDate} = storeToRefs(mainStore)
const startDateStr = computed(() => formatMonthDay(startDate.value))
const endDateStr = computed(() => formatMonthDay(endDate.value))
const stayCount = ref(getDiffDays(startDate.value, endDate.value))
const onConfirm = (value) => {
  const selectStartDate = value[0]
  const selectEndDate = value[1]
  // 修改pina方式一
  // mainStore.startDate = selectStartDate
  // 方式二，必须要storeToRefs()
  startDate.value = selectStartDate
  mainStore.endDate = selectEndDate
  stayCount.value = getDiffDays(selectStartDate, selectEndDate)
  showCalendar.value = false
}

const homeStore = useHomeStore()
homeStore.fetchHotSuggestsData()
const {hotSuggests} = storeToRefs(homeStore)

const searchClick = () => {
  router.push({
    path: "/search",
    query: {
      startDate: startDate.value,
      endDate: endDate.value,
      currentCity: currentCity.value.cityName
    }
  })
}
</script>

<style lang="less" scoped>
.search-box {
  width: 90%;
  margin: 10px 20px;
  --van-calendar-popup-height: 100%;
}
.location{
  display: flex;
  align-items: center;
  text-align: center;
  .city{
    flex: 1;
  }
  .kong{
    flex: 1;
  }
  .position{
    flex: 1;
    img{
        width: 16px;
    }
  }
}
.date-range{
  display: flex;
  text-align: center;
  padding: 10px 0;
  .start{
    flex: 1;
  }
  .stay{
    flex: 1;
    line-height: 32px;
  }
  .end{
    flex: 1;
  }
  .text{
    color: gray;
  }
} 
.section{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 20px;
  color: #999;
  text-align: center;
  .start{
    flex: 1;
  }
  .kong{
    flex: 1;
  }
  .end{
    flex: 1;
  }
}
.hot-suggest{
  .item{
    padding:3px 5px;
    margin:3px 5px;
    border-radius: 14px;
    font-size: 12px;
    background: #f2f2f2;
    color: #000;
  }
}

.search-btn{
  width: 342px;
  height: 38px;
  max-height: 50px;
  font-weight: 500;
  line-height: 38px;
  text-align: center;
  border-radius: 20px;
  color: #fff;
  background-image: var(--theme-linear-gradient);
}
</style>